<template>
	<view>
		<view class="flex justify-start align-center padding solid-bottom bg-white" @click="onAddPage">
			<view class="cuIcon-roundadd text-grey"></view>
			<view class="margin-left-sm">新建页面</view>
		</view>
		<scroll-view scroll-y class="second-menu " style="height: 35vh;">
			<view v-for="(item,index) in pageList" :key="index" class="flex justify-between padding align-center bg-white solid-bottom"
			 :data-index="index" @click="onSelectPage(index)">
				<view>{{item.name}}</view>
				<view>{{item.create_time}}</view>
			</view>
		</scroll-view>
		<view class="flex justify-start align-center bg-gray padding-sm">
			<view class="flex-sub margin-left">
				<text class="cuIcon-cuIcon text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-text text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-pic text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-square text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-round text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-emojifill text-grey size-42 "></text>
			</view>
			<view class="flex-sub">
				<text class="cuIcon-move text-grey size-42 "></text>
			</view>
			
		</view>
		<scroll-view scroll-y class="second-menu" style="height: 50vh;">
			<cuBar title="独立组件" hint="Modal" modal="3"></cuBar>
			<view>
				<cu-grid :datas="elements" @onclick="onAddElementItem"></cu-grid>
			</view>
			<cuBar title="组合组件" hint="Modal" modal="3"></cuBar>
			<view>
				<cu-grid :datas="elements1" @onclick="onAddElementItem"></cu-grid>
			</view>
			<cuBar title="示例" hint="Modal" modal="3"></cuBar>
			<view>
				<cu-grid :datas="elements2" @onclick="onAddElementItem"></cu-grid>
			</view>
		</scroll-view>
		<dialog-input title="页面标题" :modalName="modalName" @onhide="modalName=null" @onclick="onChangeTitle"></dialog-input>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import cuGrid from '@/components/single/grid/cu-grid.vue'
	import cuBar from '@/components/single/bar/cu-bar.vue';
	import dialogInput from '@/components/single/modal/dialog_input.vue'
	export default {
		components: {
			cuGrid,
			cuBar,
			dialogInput
		},
		data() {
			return {
				modalName: null,
				current: 0,
				pageList: [{
						name: '自定义页面1',
						auther: 'xxx',
						create_time: '2021-03-11',
						lists: [{
							controller: 'Header',
							attribute: {
								text: '测试标题',
								bgcolor: 'bg-gradual-blue',
								back: false
							},
							data: []
						}]
					},
					{
						name: '自定义页面2',
						auther: 'xxx',
						create_time: '2021-03-11',
						lists: [{
							controller: 'Header',
							attribute: {
								text: '测试标题',
								bgcolor: 'bg-gradual-blue',
								back: false
							},
							data: []
						}]
					}
				],
				elements: [{
						title: '操作条',
						name: 'bar',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '卡片',
						name: 'card',
						color: 'blue',
						cuIcon: 'card'
					},
					{
						title: '按钮',
						name: 'button',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						title: '气泡',
						name: 'chat',
						color: 'purple',
						cuIcon: 'font'
					},
					{
						title: '表单 ',
						name: 'from',
						color: 'mauve',
						cuIcon: 'cuIcon'
					},
					{
						title: '选择器',
						name: 'picker',
						color: 'pink',
						cuIcon: 'btn'
					},
					{
						title: '导航栏',
						name: 'nav',
						color: 'brown',
						cuIcon: 'tagfill'
					},
					{
						title: '步骤条',
						name: 'steps',
						color: 'red',
						cuIcon: 'myfill'
					},
					{
						title: '轮播',
						name: 'swiper',
						color: 'orange',
						cuIcon: 'icloading'
					},
					{
						title: '时间线',
						name: 'timeline',
						color: 'olive',
						cuIcon: 'copy'
					},
					{
						title: '网格',
						name: 'gridlist',
						color: 'green',
						cuIcon: 'cascades'
					},
					{
						title: '列表',
						name: 'list',
						color: 'red',
						cuIcon: 'list'
					},
					{
						title: '横幅',
						name: 'banner',
						color: 'orange',
						cuIcon: 'pic'
					},
					{
						title: '条目',
						name: 'cell',
						color: 'green',
						cuIcon: 'sort'
					},
					{
						title: '进度条',
						name: 'progress',
						color: 'brown',
						cuIcon: 'rankfill'
					},
					{
						title: '树状条',
						name: 'tree',
						color: 'pink',
						cuIcon: 'magic'
					},
					{
						title: '徽章',
						name: 'badge',
						color: 'blue',
						cuIcon: 'medal'
					},
					{
						title: '分页器',
						name: 'pagination',
						color: 'green',
						cuIcon: 'loading2'
					},
					{
						title: '抽屉',
						name: 'drawer',
						color: 'cyan',
						cuIcon: 'punch'
					}
				],
				elements1: [{
						title: '上传',
						name: 'upload',
						color: 'cyan',
						cuIcon: 'pullup'
					},
					{
						title: '模态框',
						name: 'modal',
						color: 'blue',
						cuIcon: 'send'
					},
					{
						title: '编辑框',
						name: 'editor',
						color: 'purple',
						cuIcon: 'edit'
					},
					{
						title: '地图 ',
						name: 'map',
						color: 'mauve',
						cuIcon: 'location'
					},
					{
						title: '表格',
						name: 'table',
						color: 'pink',
						cuIcon: 'text'
					},
					{
						title: '日历',
						name: 'calendar',
						color: 'brown',
						cuIcon: 'remind'
					},
					{
						title: '二维码',
						name: 'recode',
						color: 'red',
						cuIcon: 'qrcode'
					},
					{
						title: '海报',
						name: 'poster',
						color: 'orange',
						cuIcon: 'activity'
					},
					{
						title: '绘图',
						name: 'drawing',
						color: 'olive',
						cuIcon: 'colorlens'
					},
					{
						title: '图表',
						name: 'chart',
						color: 'green',
						cuIcon: 'rank'
					}
				],
				elements2: [{
						title: 'Diy页面',
						name: 'diypage',
						color: 'mauve',
						cuIcon: 'copy'
					}, {
						title: '网络请求',
						name: 'network',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '媒体播放',
						name: 'media',
						color: 'blue',
						cuIcon: 'card'
					},
					{
						title: '联动分类',
						name: 'classify',
						color: 'red',
						cuIcon: 'btn'
					},
					{
						title: '搜索页',
						name: 'search',
						color: 'purple',
						cuIcon: 'font'
					},
					{
						title: '分享海报 ',
						name: 'poster',
						color: 'mauve',
						cuIcon: 'cuIcon'
					},
					{
						title: '产品体验',
						name: 'experience',
						color: 'pink',
						cuIcon: 'btn'
					},
					{
						title: '签到活动',
						name: 'check-ins',
						color: 'brown',
						cuIcon: 'tagfill'
					},
					{
						title: '抽奖活动',
						name: 'lottery',
						color: 'red',
						cuIcon: 'myfill'
					},
					{
						title: '助力活动',
						name: 'cheating',
						color: 'orange',
						cuIcon: 'icloading'
					},
					{
						title: '商品活动',
						name: 'commodity',
						color: 'olive',
						cuIcon: 'copy'
					},
					{
						title: '用户相关',
						name: 'clients',
						color: 'green',
						cuIcon: 'cascades'
					},
					{
						title: '异常页面',
						name: 'errors',
						color: 'red',
						cuIcon: 'list'
					},
					{
						title: '个人中心',
						name: 'users',
						color: 'orange',
						cuIcon: 'pic'
					},
					{
						title: '商品相关',
						name: 'shops',
						color: 'green',
						cuIcon: 'sort'
					},
					{
						title: '消息相关',
						name: 'message',
						color: 'brown',
						cuIcon: 'rankfill'
					},
					{
						title: '联动列表',
						name: 'linkage',
						color: 'blue',
						cuIcon: 'medal'
					}
				]
			}
		},
		props: {
			matchLeftWindow: {
				type: Boolean
			}
		},

		computed: {
			...mapState({
				active: state => state.active,
			})
		},
		watch: {
			matchLeftWindow: {
				immediate: true,
				handler(newMatches) {
					this.setMatchLeftWindow(newMatches)
				}
			}
		},
		methods: {
			...mapMutations(['setMatchLeftWindow', 'setActive', 'setPageValue', 'setElementCurrent', 'addPageElement']),
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			},
			onElements: function(e) {
				console.log(e);
				this.$util.redirectTo('/pages/single/' + this.elements[e].name);
			},
			onElements1: function(e) {
				console.log(e);
				this.$util.redirectTo('/pages/group/' + this.elements1[e].name);
			},
			onElements2: function(e) {
				console.log(e);
				this.$util.redirectTo('/pages/home/' + this.elements2[e].name);
			},
			onAddPage: function() {
				this.modalName = "InputModal";

			},
			onChangeTitle: function(vals) {
				this.modalName = null;
				console.log(vals)
				this.pageList.push({
					name: vals,
					auther: 'xxx',
					create_time: '2021-03-11',
					lists: [{
						controller: 'Header',
						attribute: {
							text: '测试标题',
							bgcolor: 'bg-gradual-blue',
							back: false
						},
						data: []
					}]
				})
				this.onSelectPage(this.pageList.length - 1);
			},
			onSelectPage: function(index) {
				this.current = index;
				this.setPageValue(this.pageList[index]);
			},
			onAddElementItem: function() {
				this.addPageElement({
					controller: 'Bar',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
			}
		}
	}
</script>

<style scoped>
	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
		border-right: #CCCCCC 2upx solid;
	}

	.icon-image {
		width: 30px;
		height: 30px;
	}
</style>
